<template>
  <div class="antd-form-wrapper">
    <a-form :model="formState" @finish="onFinish" layout="inline">
      <a-form-item
        label="姓名"
        name="username"
        :rules="[
          { required: true, message: '请输入用户名' },
          { max: 10, message: '最多只能输入10个字符' },
        ]"
      >
        <a-input v-model:value="formState.username" />
      </a-form-item>

      <a-form-item
        label="Password"
        name="password"
        :rules="[{ required: true, message: 'Please input your password!' }]"
      >
        <a-input-password v-model:value="formState.password" />
      </a-form-item>

      <a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
        <a-checkbox v-model:checked="formState.remember"
          >Remember me</a-checkbox
        >
      </a-form-item>

      <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
        <a-button type="primary" @click="onFinish" html-type="submit"
          >Submit</a-button
        >
        <a-button type="primary" html-type="rest">重置</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script setup>
import { reactive } from "vue";
const formState = reactive({
  username: "",
  password: "",
  remember: true,
});
const onFinish = (values) => {
  console.log("Success:", values);
};
const onFinishFailed = (errorInfo) => {
  console.log("Failed:", errorInfo);
};
</script>
<style scoped>
.antd-form-wrapper {
  font-size: 30px;
}
.antd-form-wrapper th,
.antd-form-wrapper tr,
.antd-form-wrapper td {
  border: 1px solid #000;
}
th,
tr,
td {
  border: 1px solid #000;
}
</style>
